<script setup lang="ts">
defineProps<{
  msg: string
}>()
</script>

<template>
  <div class="greetings">
    <h1 class="green">{{ msg }}</h1>
    <h3>
      You’ve successfully created a project with
      <a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
    </h3>
  </div>
</template>

<style lang="less" scoped>
.greetings {
  h1 {
    font-weight: 500;
    font-size: @font-sizes[4xl];
    position: relative;
    top: -10px;

    &.green {
      color: var(--vt-c-indigo);
    }
  }

  h3 {
    font-size: @font-sizes[xl];
  }

  h1,
  h3 {
    text-align: center;
  }

  a {
    color: var(--vt-c-indigo);

    &:hover {
      color: darken(@colors[primary], 10%);
    }
  }
}
</style>
